<breadcrumb />

<mat-card>
  <mat-card-content>
    <h2>SnackBar demo</h2>

    <div>
      <div>
        Message:
        <mat-form-field><input matInput type="text" [(ngModel)]="message" /></mat-form-field>
      </div>
      <div>
        <div>Position in page:</div>
        <mat-form-field>
          <mat-label>Horizontal</mat-label>
          <mat-select [(ngModel)]="horizontalPosition">
            <mat-option value="start">Start</mat-option>
            <mat-option value="end">End</mat-option>
            <mat-option value="left">Left</mat-option>
            <mat-option value="right">Right</mat-option>
            <mat-option value="center">Center</mat-option>
          </mat-select>
        </mat-form-field>
        <mat-form-field>
          <mat-label>Vertical</mat-label>
          <mat-select [(ngModel)]="verticalPosition">
            <mat-option value="top">Top</mat-option>
            <mat-option value="bottom">Bottom</mat-option>
          </mat-select>
        </mat-form-field>
      </div>
      <div>
        <mat-checkbox [(ngModel)]="action">
          @if (!action) {
            <p>Show button on snack bar</p>
          }
          @if (action) {
            <mat-form-field>
              <mat-label>Snack bar action label</mat-label>
              <input matInput type="text" [(ngModel)]="actionButtonLabel" />
            </mat-form-field>
          }
        </mat-checkbox>
      </div>
      <div>
        <mat-checkbox [(ngModel)]="setAutoHide">
          @if (!setAutoHide) {
            <p>Auto hide after duration</p>
          }
          @if (setAutoHide) {
            <mat-form-field>
              <mat-label>Auto hide duration in ms</mat-label>
              <input matInput type="number" [(ngModel)]="autoHide" />
            </mat-form-field>
          }
        </mat-checkbox>
      </div>
      <p>
        <mat-checkbox [(ngModel)]="addExtraClass">Add extra class to container</mat-checkbox>
      </p>
    </div>

    <p>
      <button mat-raised-button (click)="open()">OPEN</button>
    </p>

    <p>
      <button mat-raised-button (click)="openTemplate()">OPEN TEMPLATE</button>
    </p>

    <ng-template #template>Template snack bar: {{ message }}</ng-template>
  </mat-card-content>
</mat-card>
